import React, { useState } from 'react'
import { connect } from 'react-redux'
import style from './style.module.css'

import { Breadcrumb, Steps, Button, message } from 'antd';

import PinOne from '@/components/PinOne/pinone.jsx'
import PinTwo from '@/components/PinOne/pintwo.jsx'
import PinThree from '@/components/PinOne/pinthree.jsx'

const PinAdd = (props) => {

    const { Step } = Steps;

    const [current, setCurrent] = useState(0);
    // 保存子传父 传过来的图片地址
    const [uploadUrl, setuploadUrl] = useState("");
    // 点击下一步时 将图片地址保存到useState中
    const [uploadUrlList, setuploadUrlList] = useState("");


    //***********************************************保存子传父 传过来的所有添加的值***********************************************************
    // 拼团名称状态
    const [valueName, setvalueName] = useState('');
    // 拼团简介状态
    const [valueIntroduction, setvalueIntroduction] = useState('');
    // 商品单位状态
    const [valueUnit, setvalueUnit] = useState('');
    // 活动日期状态
    const [valueDate, setvalueDate] = useState('');
    // 拼团实效默认值
    let [valueResults, setvalueResults] = useState('');
    // 拼团人数默认值
    let [valuePeople, setvaluePeople] = useState('');
    // 数量限制默认值
    let [valueLimit, setvalueLimit] = useState('');
    // 单选按钮默认选中状态
    const [valueDan, setvalueDan] = useState('');


    // 步骤条下一步按钮事件
    const next = () => {
        let uploadUrlUrlurl = uploadUrl
        setuploadUrlList(uploadUrlUrlurl)

        if (!uploadUrlUrlurl) {
            message.error('请选择商品图片');
        } else {
        setCurrent(current + 1);
        }
    };

    // 步骤条上一步按钮事件
    const prev = () => {
        setCurrent(current - 1);
    };


    // 步骤条提交按钮事件
    const submit = () => {
        // message.success('添加成功')
        props.dispatch({
            type: "get_pinAdd",
            payload: {
                uploadUrl: uploadUrl,
                valueName: valueName,
                valueIntroduction: valueIntroduction,
                valueUnit: valueUnit,
                valueDate: valueDate,
                valueResults: valueResults,
                valuePeople: valuePeople,
                valueLimit: valueLimit,
                valueDan: valueDan,
                imglun: 1
            }
        })

        props.history.push('/layout/joinGoods')
    };



    // 子传父--获取子组件PinOne传过来的图片地址
    const AddUpload = (data) => {
        // console.log(data, 'data');
        setuploadUrl(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团名称
    const AddvalueName = (data) => {
        // console.log(data, 'data');
        setvalueName(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团简介
    const AddvalueIntroduction = (data) => {
        // console.log(data, 'data');
        setvalueIntroduction(data)
    }

    // 子传父--获取子组件PinTwo传过来的商品单位
    const AddvalueUnit = (data) => {
        // console.log(data, 'data');
        setvalueUnit(data)
    }

    // 子传父--获取子组件PinTwo传过来的活动日期
    const AddvalueDate = (data) => {
        // console.log(data, 'data');
        setvalueDate(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团实效
    const AddvalueResults = (data) => {
        // console.log(data, 'data');
        setvalueResults(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团人数
    const AddvaluePeople = (data) => {
        // console.log(data, 'data');
        setvaluePeople(data)
    }

    // 子传父--获取子组件PinTwo传过来的数量限制
    const AddvalueLimit = (data) => {
        // console.log(data, 'data');
        setvalueLimit(data)
    }

    // 子传父--获取子组件PinTwo传过来的活动状态
    const AddvalueDan = (data) => {
        // console.log(data, 'data');
        setvalueDan(data)
    }



    const steps = [
        {
            title: '选择拼团商品',
            content: <PinOne AddUpload={AddUpload} />,
        },
        {
            title: '填写基础信息',
            content: <PinTwo
                uploadUrlList={uploadUrlList}
                AddvalueName={AddvalueName}
                AddvalueIntroduction={AddvalueIntroduction}
                AddvalueUnit={AddvalueUnit}
                AddvalueDate={AddvalueDate}
                AddvalueResults={AddvalueResults}
                AddvaluePeople={AddvaluePeople}
                AddvalueLimit={AddvalueLimit}
                AddvalueDan={AddvalueDan}
            />,
        },
        {
            title: '修改商品详情',
            content: <PinThree uploadUrl={uploadUrl} />,
        },
    ];



    return <div className={style.pinadd_M}>
        <div className={style.pinadd_header_M}>
            <Breadcrumb separator=">">
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Item>营销</Breadcrumb.Item>
                <Breadcrumb.Item>拼团管理</Breadcrumb.Item>
                <Breadcrumb.Item>拼团商品</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={style.pinadd_main_M}>
            <div className={style.main_M}>
                <Steps current={current}>
                    {steps.map(item => (
                        <Step key={item.title} title={item.title} />
                    ))}
                </Steps>
                <div className="steps-content">{steps[current].content}</div>
                <div className="steps-action">
                    {current < steps.length - 1 && (
                        <Button type="primary" onClick={() => next()}>
                            下一步
                        </Button>
                    )}
                    {current === steps.length - 1 && (
                        <Button type="primary" onClick={() => submit()}>
                            提交
                        </Button>
                    )}
                    {current > 0 && (
                        <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                            上一步
                        </Button>
                    )}
                </div>
            </div>
        </div>
    </div>
}

export default connect(() => {
    return {

    }
})(PinAdd)